<template>
	<view class="menu_content" v-if="searchList&&searchLoading == false">
		<block v-for="e,i in searchList" :key="i">
			<view class="content" v-if="e.r" @tap="menuDetail(e.r.id)">
				<block>
					<view class="con_left">
						<image class="left_img" :src="`${e.r.img}`" mode="scaleToFill"></image>
					</view>
					<view class="con_right">
						<view class="r_title">
							{{e.r.n}}
						</view>
						<view class="r_rate">
							{{scoreNum(e.r.rate)}}
						</view>
						<view class="r_little"
							:style="`color:${e.r.recipe_list_tags[0].text_color};background:${e.r.recipe_list_tags[0].background_end_color}`"
							v-if="e.r.recipe_list_tags[0]">
							{{e.r.recipe_list_tags[0].text}}
						</view>
						<view class="user_info">
							<image class="info_img" :src="`${e.r.a.p}`" mode=""></image>
							<view class="info_name">
								{{e.r.a.n}}
							</view>
						</view>
					</view>
				</block>
				<!-- 广告 -->
				<!-- <block v-if="e.dsp && e.dsp.ximage != ''">
					<view class="con_left">
						<image class="left_img" :src="`${e.dsp.ximage}`" mode="scaleToFill"></image>
					</view>
					<view class="con_right">
						<view class="r_title">
							{{e.dsp.name}}
						</view>
						<view class="r_rate">
							{{scoreNum(e.dsp.request_timeout)}}
						</view>
						<view class="user_info">
							<image class="info_img" :src="`${e.dsp.user.user_photo}`" mode=""></image>
							<view class="info_name">
								{{e.dsp.user.nick}}
							</view>
						</view>
					</view>
				</block> -->
			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		name: "searchMenuContent",
		// props: ["content"],
		data() {
			return {
				tempData: [],
			};
		},
		computed: {
			...mapState(["searchList", "searchLoading"]),

			scoreNum() {
				return function(num) {
					if (!isNaN(num)) {
						return ((num + '').indexOf('.') != -1) ? num + '分' : num.toFixed(1) + '分';
					}
				}
			}
		},
		methods:{
			menuDetail(k){
				console.log(k)
				uni.navigateTo({
					url:`/pages/childPage/menuDetail/menuDetail?value=${k}`
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.menu_content {
		.content {
			display: flex;
			flex-wrap: wrap;
			    justify-content: space-around;
			align-items: center;
			width: 96%;
			margin: 20rpx auto;
			height: 280rpx;

			&:first-child {
				margin-top: 6rpx;
			}

			.con_left {
				width: 54%;

				.left_img {
					width: 100%;
					height: 280rpx;
					border-radius: 16rpx;
				}
			}

			.con_right {
				width: 40%;
				height: 280rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				flex-wrap: wrap;

				.r_title {
					width: 100%;
					font-size: 34rpx;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.r_rate {
					color: #000000;
					font-weight: bold;
				}

				.r_little {
					// background-color: #007AFF;
					width: 50%;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					text-align: center;
					border-radius: 8rpx;
				}

				.user_info {
					display: flex;
					align-items: center;

					.info_img {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					.info_name {
						color: #999998;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
